<script>
import iconPopoverVue from "./components/icon-popover/icon-popover.vue";
export default {
  components: {
    iconPopoverVue,
  },
  props: {
    size: {
      type: String || Number,
      default: "34",
    },
    raiuds: {
      type: Boolean,
      default: false,
    },
    icon: {
      type: String,
      default: "",
    },
    popover: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      selectIcon: "",
    };
  },
  render(cleateElement) {
    let icon = this.$props.icon;
    let popover = this.$props.popover;
    let spanSize = this.spanSize;
    let spanElement = cleateElement(
      "span",
      {
        class: "icon-box",
        style: { width: spanSize, height: spanSize, lineHeight: spanSize },
        slot: "reference",
      },
      [
        cleateElement("i", {
          class: ["overall-icon", icon],
        }),
      ]
    );
    if (popover) {
      return cleateElement(
        "el-popover",
        {
          attrs: {
            placement: "right",
            width: "400",
            trigger: "click",
          },
        },
        [
          cleateElement(
            "div",
            {
              class: "popover-box",
            },
            [
              cleateElement("iconPopoverVue", {
                on: {
                  click: this.clickPopoverIcon,
                },
              }),
            ]
          ),
          spanElement,
        ]
      );
    } else {
      return spanElement;
    }
  },

  computed: {
    spanSize() {
      return parseInt(this.size) + "px";
    },
  },
  methods: {
    clickPopoverIcon(iconClass) {
      let icon = iconClass;
      this.selectIcon = icon;
      this.$emit("select",iconClass)
    },
  },
};
</script>

<style lang="scss" scoped>
.overall-icon-radius {
  border-radius: 50%;
}

.icon-box {
  display: inline-block;
  border: 2px dashed #c3c3c3;
  background: white;
  text-align: center;
  font-size: 18px;
}
.popover-box {
  height: 400px;
}
</style>
